"use client";
import { getShopInfoApi, getShopListApi, ShopInfo } from "@/api/depositsApi";
import Loading from "@/components/Loading";
import React from "react";
import DepositData from "./DepositData";
import Left from "./Left";

const Deposit = () => {
    const [actIdx, setActIdx] = React.useState(0);
    const [shopTypeList, setShopTypeList] = React.useState<any[]>([]);
    const [currentChannel, setCurrentChannel] = React.useState<any>({});
    const [shopInfo, setShopInfo] = React.useState<ShopInfo>({} as ShopInfo);
    const [loading, setLoading] = React.useState(false);

    const actChange = (idx: number) => {
        setActIdx(idx);
        doChangeChannel(shopTypeList[idx].pay_channel[0]); //TODO: dele
    };
    const currentShop = React.useMemo(() => {
        return shopTypeList[actIdx];
    }, [actIdx, shopTypeList]);

    React.useEffect(() => {
        getData();
    }, []);

    React.useEffect(() => {
        const id = shopTypeList[actIdx]?.id;
        getInfo(id);
    }, [actIdx, shopTypeList]);

    const getData = async () => {
        const res = await getShopListApi();
        if (res?.code === 200 && res?.data) {
            setShopTypeList(res?.data || []);
            if (res?.data[actIdx]?.pay_channel[0]) {
                doChangeChannel(res?.data[actIdx]?.pay_channel[0]);
            }
        }
    };

    const getInfo = async (id: number) => {
        if (!id) {
            setShopInfo({} as ShopInfo);
            return;
        }
        try {
            setLoading(true);
            const res = await getShopInfoApi({ shop_id: id });
            if (res?.code === 200 && res?.data?.products?.length) {
                res.data.products.sort((a: any, b: any) => {
                    return a.pay - b.pay;
                }); //TODO: sort sho
                setShopInfo(res.data);
            }
        } finally {
            setLoading(false);
        }
    };

    const doChangeChannel = (data: any) => {
        setCurrentChannel(data);
    };

    console.log(9991, currentChannel);
    return (
        <div className="flex h-[100%] flex-row items-stretch">
            <div className="w-[1rem]">
                <Left
                    data={shopTypeList}
                    onChange={actChange}
                    channelData={currentChannel}
                    actIdx={actIdx}
                ></Left>
            </div>

            <div className="flex-1 overflow-auto">
                {!loading && (
                    <DepositData
                        onActiveChange={doChangeChannel}
                        currentChannel={currentChannel}
                        setChannel={doChangeChannel}
                        shopInfo={shopInfo}
                        channel={currentShop?.pay_channel || []}
                        currentShop={currentShop}
                    />
                )}
                {loading && (
                    <div className="flex h-[100%] items-center justify-center">
                        <Loading></Loading>
                    </div>
                )}
            </div>
        </div>
    );
};

export default Deposit;